<template>
  <view class="profile-subscribe-modal" v-if="show">
    <view class="modal-mask"></view>
    <view class="modal-container">
      <!-- 顶部装饰 -->
      <view class="modal-decoration top-left"></view>
      <view class="modal-decoration top-right"></view>
      <view class="modal-decoration bottom-left"></view>
      <view class="modal-decoration bottom-right"></view>
      
      <!-- 标题 -->
      <view class="modal-title">
        <view class="icon-wrapper">
          <text class="tn-icon-notice-fill notification-icon"></text>
        </view>
        <text>接收重要通知</text>
      </view>
      
      <!-- 提示内容 -->
      <view class="subscribe-content">
        <view class="content-text">
          <text>开启后，当你的资料审核完成、收到互动消息时，我们将第一时间通知您，不错过任何重要信息！</text>
        </view>
        
        <!-- 消息示例 -->
        <view class="message-example">
          <view class="message-card">
            <view class="message-title">系统通知</view>
            <view class="message-item">
              <text class="label">通知类型:</text>
              <text class="value">资料审核</text>
            </view>
            <view class="message-item">
              <text class="label">审核结果:</text>
              <text class="value">审核通过</text>
            </view>
            <view class="message-item">
              <text class="label">提醒:</text>
              <text class="value highlight">您的资料已审核通过，个人主页已上线！</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部操作区 - 移除取消按钮 -->
      <view class="modal-actions">
        <view class="action-btn subscribe" @tap="requestSubscribe">
          <text class="tn-icon-notice-fill action-icon"></text>
          <text>立即开启</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: 'ProfileSubscribe',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      templateIds: [],
      isRequesting: false
    };
  },
  methods: {
    /**
     * 取消订阅，关闭弹窗
     */
    cancelSubscribe() {
      // 关闭弹窗
      this.$emit('update:show', false);
      
      // 触发取消事件
      this.$emit('cancel');
    },
    
    /**
     * 请求订阅消息授权
     */
    requestSubscribe() {
      this.$emit('success');
    }
  }
};
</script>

<style lang="scss" scoped>
/* 弹窗样式 */
.profile-subscribe-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10rpx);
}

.modal-container {
  position: relative;
  width: 650rpx;
  background-color: #1a1a1a;
  border-radius: 30rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.3);
  z-index: 2;
  overflow: hidden;
}

/* 装饰元素 */
.modal-decoration {
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #B3F73C, rgba(179, 247, 60, 0.2));
  z-index: 1;
  border-radius: 50%;
  opacity: 0.5;
}

.top-left {
  top: -40rpx;
  left: -40rpx;
  transform: scale(0.8);
}

.top-right {
  top: -35rpx;
  right: -35rpx;
  transform: scale(0.6);
}

.bottom-left {
  bottom: -35rpx;
  left: -35rpx;
  transform: scale(0.6);
}

.bottom-right {
  bottom: -40rpx;
  right: -40rpx;
  transform: scale(0.8);
}

/* 删除关闭按钮样式 */

/* 标题样式 */
.modal-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
  color: #ffffff;
  font-size: 36rpx;
  font-weight: bold;
}

.icon-wrapper {
  width: 70rpx;
  height: 70rpx;
  background: linear-gradient(135deg, #B3F73C 0%, #92D32F, #72B423);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.5);
}

.notification-icon {
  color: #000000;
  font-size: 36rpx;
}

/* 内容样式 */
.subscribe-content {
  margin-bottom: 40rpx;
}

.content-text {
  color: #cccccc;
  font-size: 28rpx;
  line-height: 1.5;
  margin-bottom: 30rpx;
  text-align: center;
}

/* 消息示例样式 */
.message-example {
  margin-top: 40rpx;
}

.message-card {
  background-color: #252525;
  border-radius: 20rpx;
  padding: 30rpx;
  border: 1rpx solid #333;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.message-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #B3F73C;
  margin-bottom: 20rpx;
  text-align: center;
}

.message-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
  font-size: 26rpx;
}

.message-item .label {
  color: #999;
  width: 140rpx;
  flex-shrink: 0;
}

.message-item .value {
  color: #e0e0e0;
  flex: 1;
}

.message-item .highlight {
  color: #B3F73C;
  font-weight: bold;
}

/* 底部操作区 - 修改为只有一个按钮 */
.modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 0;
  border-radius: 50rpx;
  font-size: 28rpx;
  font-weight: bold;
  width: 80%;
}

.subscribe {
  background: linear-gradient(135deg, #B3F73C 0%, #92D32F 100%);
  color: #000;
  position: relative;
  overflow: hidden;
}

.action-icon {
  margin-right: 10rpx;
  font-size: 32rpx;
}

/* 闪光效果 */
.subscribe::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
  z-index: 1;
}

/* 确保文本和图标在动画上方 */
.subscribe text {
  position: relative;
  z-index: 2;
}

.subscribe:active {
  transform: translateY(4rpx);
  box-shadow: 0 4rpx 8rpx rgba(179, 247, 60, 0.2);
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}
</style> 